<template>
  <div class="header">
    <span v-for="(item, index) in list" @click="setCurrent(index)" :class="(index == current) && 'active'">{{item}}</span>
  </div>
  <!-- 起步 -->
  <demo1 v-if="current == 0"/>
  <!-- 使用控制器查看3D物体 -->
  <demo2 v-if="current == 1"/>
  <!-- 添加坐标轴辅助器 -->
  <demo3 v-if="current == 2"/>
  <!-- 3D 物体移动 -->
  <demo4 v-if="current == 3"/>


</template>

<script setup>
import demo1 from './components/demo1.vue'
import demo2 from './components/demo2.vue'
import demo3 from './components/demo3.vue'
import demo4 from './components/demo4.vue'

import {reactive, ref} from 'vue'

const list = reactive([
  '起步', '使用控制器' , '添加坐标轴', '物体移动'
])

const current = ref(3)
const setCurrent = index => {
  current.value = index
}
</script>


<style scoped>
 .header{
  height: 50px;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .header > span{
  margin: 10px;
  font-weight: 600;
 }
 .active{
  color: #2979ff;
 }
</style>

<style>
   * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
</style>
